<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页三</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">

		<style>
			.top-panel {
				border-radius: 4px;
				text-align: center;
			}

			.top-panel>.layui-card-body {
				height: 60px;
			}

			.top-panel-number {
				line-height: 60px;
				font-size: 30px;
				border-right: 1px solid #eceff9;
			}

			.top-panel-tips {
				padding-left: 8px;
				padding-top: 16px;
				line-height: 30px;
				font-size: 12px
			}

			.pear-container {
				background-color: whitesmoke;
				margin: 10px;
			}

			.card {
				width: 100%;
				height: 160px;
				background-color: whitesmoke;
				border-radius: 4px;
			}

			.card .header .avatar {
				width: 28px;
				height: 28px;
				margin: 20px;
				border-radius: 50px;
			}

			.card .header {
				color: dimgray;
			}

			.card .body {
				color: gray;
			}

			.card .body {
				margin-left: 20px;
				margin-right: 20px;
			}

			.card .footer {
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 20px;
				font-size: 13px;
				color: gray;
				position: absolute;
			}
			
			.list .list-item{
			       height: 33px;
				   line-height: 33px;
				   color: gray;
				   padding: 5px;
				   padding-left: 15px;
				   border-radius: 4px;
				   margin-top: 5.2px;
			}
			
			.custom-tab .layui-tab-title{
			       border-bottom-width: 0px; 
			       border-bottom-style: none;
			}
			.custom-tab .layui-tab-title li{
		      	   margin-left: 10px;
			}
			
			.list .list-item:hover{
				background-color: whitesmoke;
			}
			
			
			.list .list-item .title{
				font-size:13px;
				width: 100%;
			}
			.list .list-item .footer{
				position: absolute;
				right: 30px;
				font-size: 12px;
			}
			
			.top-panel-tips i {
			
				font-size: 33px;
			}
		
		</style>
	</head>
	<body class="pear-container">
		<div>
            <div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">今日访问</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									9,04,0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">提交次数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									6,34,4
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">下载数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									1,34,1
								</div>
								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
								   <i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">流量统计</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									7,04,6
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
								    <i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md9">
					<div class="layui-card">
						<div class="layui-card-body">
							
							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							  <ul class="layui-tab-title">
							    <li class="layui-this">项目列表</li>
							    <li>数据统计</li>
							  </ul>
							  <div class="layui-tab-content">
								  <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
							  </div>
							</div>   
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">开源动态</div>
						<div class="layui-card-body">
						<script src='https://gitee.com/Jmysy/Pear-One-Layui/widget_preview' async defer></script>
						<div id="osc-gitee-widget-tag"></div>
						<style>
						.osc_pro_color {color: #4183c4 !important;}
						.osc_panel_color {background-color: #ffffff !important;}
						.osc_background_color {background-color: #ffffff !important;}
						.osc_border_color {border-color: #e3e9ed !important;}
						.osc_desc_color {color: #666666 !important;}
						.osc_link_color * {color: #9b9b9b !important;}
						</style>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">最近更新</div>
						<div class="layui-card-body">
							<ul class="list">
								<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2019-12-15   11:28</span></li>
								<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2019-12-15   11:28</span></li>
								<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2019-12-15   11:28</span></li>
								<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2019-12-15   11:28</span></li>
								<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9   14:58</span></li>
								<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7   9:06</span></li>
								<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1   10:26</span></li>
								<li class="list-item"><span class="title">Pear Admin 框架正式开源</span><span class="footer">2019-11-27   07:23</span></li>
								<li class="list-item" style="height: 37px;"><button class="layui-btn layui-btn-normal layui-btn-fluid">查 看 更 多</button></li>
						   </ul>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">版本信息</div>
						<div class="layui-card-body">
							<table class="layui-table">
								<thead>
									<tr>
										<th>项目名称</th>
										<th>Pear Admin</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>开源作者</td>
										<td>就 眠 仪 式</td>
									</tr>
									<tr>
										<td>当前版本</td>
										<td>2.0.1 Version</td>
									</tr>
									<tr>
										<td>基于框架</td>
										<td>Layui | JQuery | awesome</td>
									</tr>
									<tr>
										<td>开源协议</td>
										<td>Apache License</td>
									</tr>
									<tr>
										<td>开发周期</td>
										<td>2019 年 11 月 15 日</td>
									</tr>
									<tr>
										<td>产品定位</td>
										<td>Layui 前端模板框架</td>
									</tr>
									<tr>
										<td>所属社区</td>
										<td>Pear 社区</td>
									</tr>
									<tr>
										<td>开发文档</td>
										<td><a href="">查看文档</a></td>
									</tr>
									<tr>
										<td>下载渠道</td>
										<td>
											<button class="layui-btn layui-btn-normal layui-btn-sm">
												<i class="fa fa-gitlab"></i><span>&nbsp;码 云</span>
											</button>
											<button class="layui-btn layui-btn-primary layui-btn-sm">
												<i class="fa fa-github"></i><span>&nbsp;Git Hub</span>
											</button>
										</td>
									</tr>
								</tbody>
							</table>
					
						</div>
					</div>
				</div>
			</div>
        </div>
		<!--</div>-->
		<script src="../../component/layui/layui.js" charset="utf-8"></script>
		<script>
		    layui.use(['layer', 'echarts','element'], function () {
		        var $ = layui.jquery,
		            layer = layui.layer,
					element = layui.element,
		            echarts = layui.echarts;
	
		        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
		
		        var optionRecords = {
		            title: {
		                text: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'cross',
		                    label: {
		                        backgroundColor: '#6a7985'
		                    }
		                }
		            },
		            legend: {
		                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
		            },
		            toolbox: {
		                feature: {
		                    saveAsImage: {}
		                }
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '3%',
		                containLabel: true
		            },
		            xAxis: [
		                {
		                    type: 'category',
		                    boundaryGap: false,
		                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		                }
		            ],
		            yAxis: [
		                {
		                    type: 'value'
		                }
		            ],
		            series: [
		                {
		                    name: '邮件营销',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [120, 132, 101, 134, 90, 230, 210]
		                },
		                {
		                    name: '联盟广告',
		                    type: 'line',
		                    areaStyle: {},
		                    data: [220, 182, 200, 234, 290, 330, 310]
		                },
		                {
		                    name: '视频广告',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [900, 600, 450, 599, 650, 750, 900]
		                },
		                {
		                    name: '直接访问',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [600, 454, 545, 699, 899, 1000, 1100]
		                },
		                {
		                    name: '搜索引擎',
		                    type: 'line',
		                    stack: '总量',
		                    label: {
		                        normal: {
		                            show: true,
		                            position: 'top'
		                        }
		                    },
		                    areaStyle: {},
		                    data: [820, 932, 901, 934, 1290, 1330, 1320]
		                }
		            ]
		        };
		        echartsRecords.setOption(optionRecords);
		
		        window.onresize = function () {
		            echartsRecords.resize();
		        }
		
		    });
		</script>
	</body>
</html>
